<template>
	<view class="th-cell-box">
		<view v-if="showLtop" class="line-top"></view>
		<view class="title">{{title}}</view>
		<view v-if="required" class="star">*</view>
		<view class="right-content">
			<view class="input-box text-zh" v-if="disabled&&loge">{{contentValue}}</view>
			<u-input v-if="!loge" :adfouc="false" class="input-box" v-model="contentValue" :disabled="disabled&&!loge"
				:placeholder="placeHolder" :placeholderStyle="placeholderStyle" :type="type"
				@click="contentTap"></u-input>
			<u-icon v-if="showArrow" name="arrow-right" color="#999999" @click="contentTap"></u-icon>
			<view @click="contentTap"><u-icon v-if="addLogo" name="plus-circle" color="deepskyblue" size="45"></u-icon>
			</view>

		</view>
		<view v-if="showLbto" class="line"></view>
	</view>
</template>

<script>
	export default {
		name: "th-cell",
		data() {
			return {
				contentValue: '',
				placeholderStyle: "fontSize: 32rpx;fontWeight: 500;color: #999999",
			};
		},
		props: {
			title: {
				type: String,
				default: '默认标题'
			},
			placeHolder: {
				type: String,
				default: '请输入'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			loge: {
				type: Boolean,
				default: false
			},
			showArrow: {
				type: Boolean,
				default: false
			},
			showLtop: {
				type: Boolean,
				default: false
			},
			showLbto: {
				type: Boolean,
				default: true
			},
			addLogo: {
				type: Boolean,
				default: false
			},
			required: {
				type: Boolean,
				default: true
			},
			value: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text', //number | idcard | digit | password
			}
		},
		watch: {
			value: {
				handler(newValue, oldValue) {
					this.contentValue = newValue
				},
				immediate: true
			}
		},
		methods: {
			contentTap() {
				console.log('contentTap')
				this.$emit('contentTap')
			},
			getData() {
				return this.contentValue == undefined ? '' : this.contentValue
			}
		}
	}
</script>

<style scoped lang="scss">
	.th-cell-box {
		width: 100%;
		min-height: 120rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 46rpx;
		padding-right: 56rpx;
		background: #fff;
		position: relative;

		.title {
			font-size: 32rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
		}

		.star {
			font-size: 32rpx;
			color: red;
		}

		.right-content {
			flex: 1;
			display: flex;
			align-items: center;


			.input-box {
				flex: 1;
				margin-right: 10rpx;
				margin-left: 15rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
				text-align: right;
			}
		}

		.line {
			position: absolute;
			bottom: 0;
			left: 46rpx;
			right: 0;
			height: 2rpx;
			background: #F6F7FB;
		}

		.line-top {
			position: absolute;
			top: 0;
			left: 46rpx;
			right: 0;
			height: 2rpx;
			background: #F6F7FB;
		}

	}
</style>